<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter, } from 'vue-router'

const router = useRouter()
onMounted(() => {
    const charEle = document.getElementById('msg') as HTMLElement;
    const time = ref(5);
    setInterval(function () {
        if (time.value == 0) {
            location.href = "/";
        } else {
            charEle.innerHTML = "将在 " + time.value + " 秒后跳转";
            time.value--;
        }
    }, 1000)
})
</script>
<template>
    <div class="box">
        <div>
            <h2>抱歉，您输入的地址没有找到</h2>
            <h3>o(╥﹏╥)o</h3>
            <div id="msg"></div>
            <div>
                <el-button bg type="text" @click="router.push({ path: '/' })">点击返回主页</el-button>
            </div>
        </div>
    </div>
</template>


<style scoped lang="scss">
.box {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;

    div>* {
        text-align: center;
        margin: 20px auto;
    }

    #msg {
        font-size: 18px;
        font-weight: 600;
    }

}
</style>
